import { SyncOutlined } from "@ant-design/icons"
import React from "react"
import styles from "./index.less"

/**
 * 
 * label卡片框
 * @returns 
 */

export interface IProps {
  label?: string
  children?: React.ReactNode
  marginTop?: string | number
  style?: React.CSSProperties
  headRight?: React.ReactNode
  loading?: boolean,
  labelLineClass?: string,
  labelWraperClass?: string,
  labelTextClass?: string,
  labelWraperHeaderClass?: string
  labelWraperBodyClass?: string
}


const LabelWraper = (props: IProps) => {
  const {
    label,
    style,
    children,
    headRight,
    loading,
    labelLineClass,
    labelWraperClass,
    labelTextClass,
    labelWraperHeaderClass,
    labelWraperBodyClass,
  } = props
  return (
    <div style={style} className={`${styles.labelWraper} ${labelWraperClass ? labelWraperClass : ""}`}>
      {label ? (
        <div className={`${styles.labelWraperHeader} ${labelWraperHeaderClass ? labelWraperHeaderClass : ""}`}>
          <div className={styles.left}>
            <span className={`${styles.labelLine} ${labelLineClass ? labelLineClass : ""}`} />
            <div className={`${styles.labelText} ${labelTextClass ? labelTextClass : ""}`}>{label}</div>
          </div>
          <div className={styles.right}>{headRight}</div>
        </div>
      ) : null}
      <div className={`${styles.labelWraperBody} ${labelWraperBodyClass ? labelWraperBodyClass : ""}`}>
        {!loading && children}
        {loading && (
          <div className={styles.loadingSpinWraper}>
            <span className={styles.loadingSpin}>
              <SyncOutlined spin />
              <span style={{ marginLeft: 5 }}> 加载中...</span>
            </span>
          </div>
        )}
      </div>
    </div>
  )
}

export default LabelWraper
